<template>
	<view class="work-container">
		<view class="grid-body">
			<uni-grid :column="1" :highlight="false" :showBorder="false" @change="changeGrid">
				<uni-grid-item class="grid-item-box" :index="0">
					<view>
						<h1>图像识别</h1>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>

	</view>
</template>
<script>
	import {
		access
	} from 'fs'
	import badge from '../../uni_modules/uview-ui/libs/config/props/badge.js'
	import {
		pathToBase64
	} from '../../utils/base64.js'
	import {
		text2Audio,
		uploadImage
	} from '../../api/text2audio.js'
	import config from '@/config'

	var innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = false; //不让它自动播放
	innerAudioContext.src = '';
	const audioSrc = config.baseUrl + '/audio/getAudioStream/';
	export default {
		data() {
			return {
				current: 0,
				swiperDotIndex: 0,
				text: "",
				object: "",
				windowH: 0,
				windowW: 0,
				bottomH: 0,
			}
		},
		mounted() {
			this.getMechineStyle()
		},
		methods: {
			getMechineStyle() {
				uni.getSystemInfo({
					success: (res) => {
						this.windowH = res.windowHeight
						this.windowW = res.windowWidth
						this.bottomH = res.windowHeight - res.safeArea.bottom
					}
				})
			},
			play() {
				console.log("play")
				innerAudioContext.src = audioSrc + ""
				innerAudioContext.play()

			},
			open(data) {
				this.$refs.popup.open('bottom')
			},
			closePop() {
				this.$refs.popup.close()
				this.innerAudioContext.stop()
			},
			changeGrid(e) {
				// console.log(e.detail)
				// uni.chooseImage({
				// 	sourceType: ['camera'],
				// 	success: (res) => {
				// 		console.log("success", res.tempFilePaths)
				// 		this.uploadImage(res.tempFilePaths[0], e)

				// 	}
				// })
				uni.navigateTo({
					url: '/pages/face/face'
				})
			},
			uploadImage(tempFilePath, e) {
				uni.uploadFile({
					url: config.baseUrl + "/audio/uploadImage",
					filePath: tempFilePath, // 传的是BoldURL
					name: 'file', //后台需要的图片字段
					formData: {
						type: e.detail.index
					},
					success: (res) => {
						console.log(res)
						if (res.statusCode == 200) {
							console.log(res.data)
							innerAudioContext.src = audioSrc + res.data.object + res.data.text
							innerAudioContext.play
							this.object = res.data.object
							this.text = res.data.text
							this.open()
						}
					},
					fail: () => {
						console.log("fail")
					}
				})
			},
			image2Base64(tempFilePath) {
				console.log("image2Base64")
				pathToBase64(tempFilePath).then(base64 => {
					this.imageClassify(base64)
				})
			},
			async imageClassify(b64) {
				var str = b64.split(',')
				console.log(str[1])

				var [error, res] = await uni.request({
					url: "https://aip.baidubce.com/rest/2.0/image-classify/v2/advanced_general",
					method: "post",
					data: {
						image: str[1],
						access_token: "24.f5811a8f3a2596e9c664e7886e514358.2592000.1698472715.282335-40130369"
					},
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					}
				})
				this.text = res
				console.log(res, error)
			},

		}
	}
</script>

<style lang="scss">
	.card {
		background-color: #bdbdbd;
		box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
	}

	.card:active {
		background-color: #f9d39f;
	}

	.work-container {
		background-color: #e9e9eb;

	}

	.txt {
		color: #1538ff;
		font-size: 20px;
	}

	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	/* #endif */

	.text {
		text-align: center;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.grid-item-box {
		display: flex;
		align-items: center;
		flex-direction: column;
		background-color: #ffffff;
		line-height: 250px;
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
		border-radius: 5px;
		margin: 10px;
	}

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
		;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-box {
		height: 150px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		height: 300rpx;
		line-height: 300rpx;
	}

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			/* #ifndef APP-NVUE */
			margin: 0 auto;
			/* #endif */
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}
</style>